import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function Index() {
  const nav = useNavigate();
  const [activeTab, setActiveTab] = useState('pending');
  const [selectedBills, setSelectedBills] = useState<string[]>([]);
  const [pendingBills, setPendingBills] = useState<any[]>([]);
  const [paidBills, setPaidBills] = useState<any[]>([]);

  type Bill = {
    id: string;
    registrationNumber: string;
    department: string;
    doctor: string;
    prescriptionTime: string;
    amount: number;
    isSelected: boolean;
    status?: string;
    orderNumber?: string;
  }

  const handleBack = () => {
    nav(-1);
  };

  const handleMoreOptions = () => {
    console.log('更多选项');
  };

  const handleTarget = () => {
    console.log('目标功能');
  };

  const handleSwitchPatient = () => {
    console.log('切换患者');
  };

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
    // 切换tab时清空选择
    setSelectedBills([]);
  };

  const handleBillSelect = (billId: string) => {
    setSelectedBills(prev => {
      if (prev.includes(billId)) {
        return prev.filter(id => id !== billId);
      } else {
        return [...prev, billId];
      }
    });
  };

  const handleSelectAll = () => {
    const currentBills = activeTab === 'pending' ? pendingBills : paidBills;
    if (selectedBills.length === currentBills.length) {
      setSelectedBills([]);
    } else {
      setSelectedBills(currentBills.map(bill => bill.id));
    }
  };

  const handlePaymentDetails = (billId: string) => {
    console.log('查看缴费明细:', billId);
    // 这里可以跳转到缴费明细页面
  };

  const handleGoToPayment = () => {
    if (selectedBills.length === 0) {
      alert('请选择要缴费的账单');
      return;
    }
    console.log('去缴费:', selectedBills);
    nav('/zhi')
  };

  useEffect(() => {
    // 模拟获取待缴费账单数据
    const mockPendingBills: Bill[] = [
      {
        id: '1',
        registrationNumber: '20200101001598Z',
        department: '门诊外一科',
        doctor: '刘医师',
        prescriptionTime: '2020-01-01 10:20:36',
        amount: 520.13,
        isSelected: false
      },
      {
        id: '2',
        registrationNumber: '20200101001602A',
        department: '口腔科',
        doctor: '章医师',
        prescriptionTime: '2020-01-01 13:20:36',
        amount: 120.50,
        isSelected: false
      }
    ];

    // 模拟获取已缴费账单数据
    const mockPaidBills: Bill[] = [
      {
        id: '3',
        registrationNumber: '20200101001598Z',
        department: '门诊外一科',
        doctor: '刘医师',
        prescriptionTime: '2020-01-01 10:20:36',
        amount: 520.13,
        isSelected: false,
        status: '已缴费',
        orderNumber: '2021010156256894'
      },
      {
        id: '4',
        registrationNumber: '20200101001582Z',
        department: '耳鼻喉科',
        doctor: '刘医师',
        prescriptionTime: '2019-12-25 15:20:36',
        amount: 300.00,
        isSelected: false,
        status: '已退费',
        orderNumber: '2021010156255236'
      }
    ];

    setPendingBills(mockPendingBills);
    setPaidBills(mockPaidBills);
    // 默认选择第一个待缴费账单
    setSelectedBills(['1']);
  }, []);

  const currentBills = activeTab === 'pending' ? pendingBills : paidBills;
  const totalAmount = currentBills
    .filter(bill => selectedBills.includes(bill.id))
    .reduce((sum, bill) => sum + bill.amount, 0);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
      门诊缴费
    </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleMoreOptions}
            style={{ 
              fontSize: '18px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ⋯
          </div>
          <div 
            onClick={handleTarget}
            style={{ 
              fontSize: '18px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ◎
          </div>
        </div>
      </div>

      {/* 患者信息区域 */}
      <div style={{
        background: '#fff',
        padding: '16px',
        marginBottom: '8px'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{ fontSize: '16px', fontWeight: 500, color: '#333' }}>
              王小柯
            </div>
            <div style={{ fontSize: '14px', color: '#999' }}>
              2015****10
            </div>
          </div>
          <div 
            onClick={handleSwitchPatient}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '4px',
              fontSize: '14px',
              color: '#1677ff',
              cursor: 'pointer'
            }}
          >
            <span>👤</span>
            <span>切换</span>
          </div>
        </div>
      </div>

      {/* 标签导航 */}
      <div style={{
        background: '#fff',
        padding: '0 16px',
        marginBottom: '8px'
      }}>
        <div style={{
          display: 'flex',
          gap: '0'
        }}>
          <div
            onClick={() => handleTabChange('pending')}
            style={{
              padding: '12px 0',
              fontSize: '16px',
              color: activeTab === 'pending' ? '#1677ff' : '#999',
              borderBottom: activeTab === 'pending' ? '2px solid #1677ff' : '2px solid transparent',
              cursor: 'pointer',
              marginRight: '24px'
            }}
          >
            待缴费
          </div>
          <div
            onClick={() => handleTabChange('paid')}
            style={{
              padding: '12px 0',
              fontSize: '16px',
              color: activeTab === 'paid' ? '#1677ff' : '#999',
              borderBottom: activeTab === 'paid' ? '2px solid #1677ff' : '2px solid transparent',
              cursor: 'pointer'
            }}
          >
            已缴费
          </div>
        </div>
      </div>

      {/* 查询提示（仅已缴费tab显示） */}
      {activeTab === 'paid' && (
        <div style={{
          background: '#fff',
          padding: '12px 16px',
          marginBottom: '8px',
          fontSize: '14px',
          color: '#999'
        }}>
          默认查询近3个月内的缴费订单
        </div>
      )}

      {/* 账单列表 */}
      <div style={{ padding: '0 16px', paddingBottom: '100px' }}>
        {currentBills.map((bill) => (
          <div
            key={bill.id}
            style={{
              background: '#fff',
              borderRadius: '8px',
              padding: '16px',
              marginBottom: '8px',
              position: 'relative'
            }}
          >
            {/* 左侧蓝色条 */}
            <div style={{
              position: 'absolute',
              left: 0,
              top: 0,
              bottom: 0,
              width: '4px',
              background: '#1677ff',
              borderRadius: '0 4px 4px 0'
            }} />

            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'flex-start'
            }}>
              <div style={{ flex: 1, paddingLeft: '12px' }}>
                <div style={{ 
                  display: 'flex', 
                  justifyContent: 'space-between', 
                  alignItems: 'center',
                  marginBottom: '8px' 
                }}>
                  <div style={{ fontSize: '14px', color: '#333' }}>
                    登记号: {bill.registrationNumber}
                  </div>

                  {bill.status && (
                    <div style={{
                      fontSize: '12px',
                      padding: '2px 8px',
                      borderRadius: '4px',
                      background: bill.status === '已缴费' ? '#f6ffed' : '#fff2e8',
                      color: bill.status === '已缴费' ? '#52c41a' : '#fa8c16'
                    }}>
                      {bill.status}
                    </div>
                  )}
                </div>
                <div style={{ fontSize: '14px', color: '#333', marginBottom: '4px' }}>
                  就诊科室: {bill.department}
                </div>
                <div style={{ fontSize: '14px', color: '#333', marginBottom: '4px' }}>
                  开单医生: {bill.doctor}
                </div>
                <div style={{ fontSize: '14px', color: '#333', marginBottom: '4px' }}>
                  开单时间: {bill.prescriptionTime}
                </div>
                <div style={{ fontSize: '14px', color: '#333', marginBottom: '4px' }}>
                  开单金额: ¥{bill.amount.toFixed(2)}
                </div>
                {bill.orderNumber && (
                  <div style={{ fontSize: '14px', color: '#333', marginBottom: '8px' }}>
                    订单号: {bill.orderNumber}
                  </div>
                )}
                <div
                  onClick={() => handlePaymentDetails(bill.id)}
                  style={{
                    fontSize: '14px',
                    color: '#1677ff',
                    cursor: 'pointer'
                  }}
                >
                  {activeTab === 'pending' ? '缴费明细 ›' : '缴费详情 ›'}
                  
                </div>
               
              </div>

              {/* 选择框（仅待缴费tab显示） */}
              {activeTab === 'pending' && (
                <div
                  onClick={() => handleBillSelect(bill.id)}
                  style={{
                    width: '20px',
                    height: '20px',
                    borderRadius: '50%',
                    border: '2px solid #1677ff',
                    background: selectedBills.includes(bill.id) ? '#1677ff' : 'transparent',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    cursor: 'pointer',
                    marginLeft: '12px'
                  }}
                >
                  {selectedBills.includes(bill.id) && (
                    <span style={{ color: '#fff', fontSize: '12px' }}>✓</span>
                  )}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* 底部操作栏（仅待缴费tab显示） */}
      {activeTab === 'pending' && (
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          background: '#fff',
          padding: '16px',
          borderTop: '1px solid #f0f0f0',
          borderRadius: '12px 12px 0 0'
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <div
                onClick={handleSelectAll}
                style={{
                  width: '20px',
                  height: '20px',
                  borderRadius: '50%',
                  border: '2px solid #d9d9d9',
                  background: selectedBills.length === currentBills.length ? '#1677ff' : 'transparent',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer'
                }}
              >
                {selectedBills.length === currentBills.length && (
                  <span style={{ color: '#fff', fontSize: '12px' }}>✓</span>
                )}
              </div>
              <div style={{ fontSize: '14px', color: '#333' }}>
                全选 (已选 {selectedBills.length} 张)
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: '14px', color: '#999', marginBottom: '2px' }}>
                  合计
                </div>
                <div style={{
                  fontSize: '18px',
                  color: '#ff4d4f',
                  fontWeight: 600
                }}>
                  ¥{totalAmount.toFixed(2)}
                </div>
              </div>
              <button
                onClick={handleGoToPayment}
                style={{
                  background: '#1677ff',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '8px',
                  padding: '12px 24px',
                  fontSize: '16px',
                  fontWeight: 600,
                  cursor: 'pointer'
                }}
              >
              去缴费
              
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default Index;
